<template>
  <div class="about">
    <div class="content" @mouseenter="isEng = false" @mouseleave="isEng = true">
      <div class="entry-header">
        <h1 v-if="isEng">👋 Hi, here is lime blogs. 🎉🎉🎉</h1>
        <h1 v-else>👋 你好, 这里是 lime blogs 🎉🎉🎉</h1>
      </div>
      <div class="entry-content">
        <p v-if="isEng">A Web Developer & Creative Developer & Internet Enthusiast</p>
        <p v-else>网页开发&创意开发&网络热爱者</p>
      </div>
      <div  class="desc">
        <p v-if="isEng">I am good at Vue, Typescript, Vite and other new technologies. </p>
        <p v-else>我擅长Vue、Typescript、Vite 等新技术。</p>
      </div>
      <div  class="desc">
        <p v-if="isEng">Do you see that cute cat at the lower left corner? </p>
        <p v-else>你看见左下角那只可爱的猫了吗?</p>
      </div>
      <div  class="desc">
        <p v-if="isEng"> I have a cat in real life ,Her name is <span class="cat" @click="catShow=!catShow">Lucky</span> .</p>
        <p v-else>现实生活中我也有只猫，她的名字叫 <span class="cat" @click="catShow=!catShow">Lucky</span> 。</p>
      </div>
      <div class="desc">
        <p v-if="isEng">Maybe you want to find me by one of these ways:</p>
        <p v-else>或许你想通过这些方式找到我：</p>
      </div>
      <div class="contact">
        <GithubOutlined title="github" @click="toGit"/>
        <WechatOutlined  @mouseenter="wechat = true" @mouseleave="wechat = false"  title="wechat" style="color: #056b3c" />
        <MailOutlined title="email" style="color: #ffc300"  @click="toEmail"/>
        <div class="wechat-img" v-if="wechat">
          <img src="../../assets/img/150057.jpg" width="180" alt="">
        </div>
      </div>
      <div class="dot-box">
        <div class="trn trn1"></div>
        <div class="trn trn2"></div>
        <div class="trn trn3"></div>
      </div>
    </div>
    <div class="cat-box" v-if="catShow">
      <catRoll @close="close"/>
    </div>
  </div>

</template>
<script setup>
import {reactive, ref, onMounted} from "vue";
import {draw} from '../../utils/particle.ts'
import catRoll from '../common/cat-roll.vue'

let isEng = ref(true)
let wechat = ref(false)
let catShow = ref(false)

const toGit = ()=>{
  window.open('https://gitee.com/somunsluk')
}
const toEmail = ()=>{
  window.open('mailto:798947300@qq.com')
}
const close = ()=>{
  catShow.value = false
}

onMounted(()=>{
  console.log(document.body.clientWidth)
  draw()
  console.log('%c Environment %c  production ', 'color:#fff;background:#565454', 'color:#fff;background:#42C02EFF;')
  console.log('%c Platform   %c  lime-blogs  ', 'color:#fff;background:#565454;', 'color:#fff;background:#1475B2FF;')
  console.log('%c Version  %c  1.1.0  ', 'color:#fff;background:#565454;', 'color:#fff;background:#1475B2FF;')
  console.log('%c Build Date  %c  2020-07-06T09:46:53.214Z   ', 'color:#fff;background:#565454;', 'color:#fff;background:#1475B2FF;')
})
</script>

<style scoped lang="less">
.about{
  width: 100%;
  height: 100%;
  position: relative;
}
.content {
  max-width: 760px;
  margin: 30px auto;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  position: relative;
  z-index: 99;
}
.content h1 {
  font-size: 34px;
  line-height: 1.3;
}
.entry-content {
  margin: 8px 0;
  color: @--secondary;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.desc{
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin: 15px 0;
  font-size: 15px;
  font-family: Consolas;
}
.cat{
  color: #97c4f1;
  cursor: pointer;
}

.contact{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  position: relative;
}
.contact span {
  cursor: pointer;
  margin: 5px;
  font-size: 24px;

}
.wechat-img{
  width: 200px;
  height: 200px;
  border: 1px #eee solid;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  top: -200px;
  background-color: #eee;
}
.dot-box{
  width: 75px;
  height: 150px;
  position: absolute;
  right: 5px;
  top: 5px;
}
.trn{
  width: 75px;
  height: 25px;
  border-radius: 10px;
  transform: rotate(145deg);
  margin: 15px auto;

}
.trn1{
  background-color: #a7bdff;
}
.trn2{
  background-color: #28e18d;
}
.trn3{
  background-color: #f5bd05;
}

.cat-box{
  width: 350px;
  height: 650px;
  position: absolute;
  top: 0;
  right: 15px;
  z-index: 99;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  background-color: #fff;
}

@media screen and (max-width: 1510px) {
  .cat-box {
    //width: 300px;
    //height: 500px;
    transform: translateZ(0) scale(80% + 1px) ;
    transform-origin: 100% 0;//设置左上角为原点
    backface-visibility: hidden;
    //-webkit-filter: blur(0);
  }
 .content{
   transform: translateZ(0) scale(90% + 1px) ;
   backface-visibility: hidden;
   //-webkit-filter: blur(0);
 }
}
@media screen and (max-width: 1510px) {
  .cat-box {
    //width: 300px;
    //height: 500px;
    transform: translateZ(0) scale(75% + 1px) ;
    transform-origin: 100% 0;//设置左上角为原点
    backface-visibility: hidden;
    //-webkit-filter: blur(0);
  }
 .content{
   transform: translateZ(0) scale(90% + 1px) ;
   backface-visibility: hidden;
   //-webkit-filter: blur(0);
 }
}
</style>